<template>
    <div >
        <van-tabs v-model="active"  @click="onchangeTab">
            <van-tab v-for="(item,index) in tabList" :title="item.name" :key="index" >  
                <van-list
                    v-model="loading"
                    :finished="finished"
                    finished-text="没有更多了"
                    @load="onLoad"
                    >
                    <template v-if="list && list.length">
                        <div v-for="(item,index) in list" :key="index" class="itemlist" >
                            <div class="flexrowbetween" style="align-items:flex-start">
                                <div class="box_content">
                                    <div class="c_item">
                                        <span class="c_title">用户名:</span>
                                        <span class="c_title">{{item.userinfo?item.userinfo.name:'-'}}</span>
                                        <!-- <span class="c_content">{{item.title}}</span> -->
                                    </div>
                                    <div class="c_item">
                                        <span class="c_title">支付方式:</span>
                                        <span class="c_content">{{item.pay_type==1?'支付宝':'微信'}}</span>
                                    </div>
                                    <div class="c_item">
                                        <span class="c_title">账号：</span>
                                        <span class="c_content">{{item.userinfo?item.userinfo.account:'-'}}</span>
                                    </div>
                                    <div class="c_item">
                                        <span class="c_title">创建时间：</span>
                                        <span class="c_content">{{item.create_time}}</span>
                                    </div>
                                    
                                </div>
                                <div class="status">
                                    <div class="checkinfo">{{item.status_name}}</div>
                                </div>
                            </div>
                            <div class="flexend">
                                <div class="detailbtn" @click="goDetail(item.id)">查看</div>
                            </div>
                        </div>
                    </template>
                    <!-- <van-cell v-for="item in list" :key="item" :title="item" /> -->
                </van-list>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import {gettxList} from '@/api/task';
export default {
    data(){
        return {
            active:0,
            tabList:[{name:'全部'},{name:'审核中'},{name:'未通过'},{name:'已通过'}],
            loading:false,
            finished:false,
            list:[],
            queryParams:{
                page:1,
                num:10
            },
            total:0
        }
    },

    methods:{

        // 下拉加载
        onLoad(){
            let params = Object.assign({},this.queryParams);
            if(this.active === 1){
                params.type = 0
            }else if(this.active === 2){
                params.type = 4
            }else if(this.active === 3){
                params.type = 1
            }
            this.loading = true;
            gettxList(params).then(res=>{
                if(res.code == 1){
                    this.loading = false
                    if (this.queryParams.page === 1) {
                        this.list = res.data.list
                    } else {
                        this.list = this.list.concat(res.data.list)
                    }
                    this.queryParams.page++;
                    if (res.data.list.length==0 ||this.list.length === res.data.count) {
                        this.finished = true;
                        this.isClickChange = false;
                    } else {
                        this.isClickChange = true;
                        this.finished = false
                    }
                }
            })
        },

        goDetail(id){
            this.$router.push({name:'TxDetail',query:{id}})
        },

        onchangeTab(name,title){
            console.log(name,title);
            this.queryParams.page = 1;
            this.finished = false;
            this.onLoad();
        }
    }
}
</script>

<style lang="scss" scoped>
.itemlist{
    border: 1px solid #333;
    background-color: #F8F8F8;
    border-radius: 12px;
    margin: 20px;
    padding: 16px;

    .box_content{
        width: 80%;
    }
    .c_item{
        width: 100%;
        font-size: 26px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 40px;
    }
    .c_title{
        color: #000;
        // display: inline-block;
    }
    .c_content{
        color: #8E8E8E;
        // display: inline-block;
    }
    .status{
        width: 20%;
    }
}
.detailbtn{
    background: url('~@/assets/images/listdetailbtn.png') center no-repeat;
    background-size: contain;
    width: 108px;
    height: 50px;
    font-size: 24px;
    line-height: 50px;
    text-align: center;
}
.checkinfo{
    border: 1px solid #333;
    border-radius: 8px;
    padding: 6px;
    font-size: 24px;
    text-align: center;
}

</style>